<template>
	<div class="search-input">
	  <!-- 输入框 -->
	  <el-input  class="search" placeholder="搜索音乐" v-model.trim="searchWord" v-popover:popover @keyup.enter="search" @focus="popoverVisible = true">
		<template #prefix >
		  <span class="iconfont icon-sousuokuangsousuo-copy" @click="search"></span>
		</template>
	  </el-input>	  

 
	  <!-- 热搜弹出框 -->
	  <!-- <el-popover ref="popover" placement="bottom" width="350" trigger="focus"  v-model:visible="popoverVisible" >
		<div class="list">
		  <div class="history" v-show="historySearch.length !== 0">
			<div class="hd">
			  <h3>搜索历史</h3>
			  <span @click="deleteAll" class="iconfont icon-delete">清空</span>
			</div>
			<div class="bd">
			  <div class="historylist">
				<div class="historylistitem" v-for="(item, index) in historySearch" :key="index" @mouseover="showClear(index)" @mouseleave="clearIcon = false" @click="addHotWord(item)">
				  <span class="icon"></span>
				  <span class="txt">{{ item }}</span>
				  <span class="icon" v-if="clearIcon && historySearchIndex === index" @click.stop="deleteHistory(index)">
					<i class="iconfont icon-guanbi"></i>
				  </span>
				</div>
			  </div>
			</div>
		  </div>
  
		  <div class="hot-search-rank hot-search-pop">
			<h3>热搜榜</h3>
			<ul>
			  <li v-for="(item, index) in searchList" :key="index" @click="addHotWord(item.searchWord)">
				<div class="num" :class="index < 3 ? 'hotword-num' : ''">
				  {{ index + 1 }}
				</div>
				<div class="main-content">
				  <div class="word">
					<span :class="index < 3 ? 'hotword' : ''">
					  {{ item.searchWord }}
					</span>
					<span class="by">{{ item.score }}</span>
					<span class="icon" v-if="item.iconUrl">
					  <img :src="item.iconUrl" alt="" />
					</span>
				  </div>
				  <p class="by" v-if="item.content">{{ item.content }}</p>
				</div>
			  </li>
			</ul>
		  </div>
		</div>
	  </el-popover> -->

  


	</div>
  </template>
  
  <script setup>
  import { ref, onMounted ,nextTick} from 'vue';
  import { getSearchHotWord } from "@/network/searchdetail/searchdeatil";
  import { useRouter } from 'vue-router';

  // 数据
const searchWord = ref('');
const searchList = ref([]);
const historySearch = ref(localStorage.getItem('historySearch') ? JSON.parse(localStorage.getItem('historySearch')) : []);
const clearIcon = ref(false);
const historySearchIndex = ref(0);

// // 获取热搜数据
onMounted(() => {
  getSearchHotWord().then(res => {
    searchList.value = res.data.data;
  });
});

// 路由
const router = useRouter();
const popoverVisible = ref(false);


const search = () => {
  if (searchWord.value === '') {
    ElMessage({
      showClose: true,
      message: '请输入内容',
      type: 'warning',
      center: true,
    });
  } else {
    console.log('搜索');
	popoverVisible.value = false;
    router.push(`/searchdetail/songres/${searchWord.value}`).catch(err => err);   
    addHistory(searchWord.value);
  }
};

const addHotWord = (word) => {
	popoverVisible.value = false; //关闭弹框
  searchWord.value = word;
  router.push(`/searchdetail/songres/${searchWord.value}`).catch(err => err);
  addHistory(word);
};

const addHistory = (word) => {
  if (!historySearch.value.includes(word)) {
    historySearch.value.push(word); //添加历史搜索
    localStorage.setItem('historySearch', JSON.stringify(historySearch.value));
  }
};

const showClear = (index) => {
  clearIcon.value = true;
  historySearchIndex.value = index;
};

const deleteHistory = (index) => {
  historySearch.value.splice(index, 1);
  localStorage.setItem('historySearch', JSON.stringify(historySearch.value));
};

const deleteAll = () => {
  localStorage.removeItem('historySearch');
  historySearch.value = [];
};
  </script>
  
  

<style lang="less" scoped>
  .search-input {
	  position: relative;
	  display: flex;
	  align-items: center;
	  .el-icon-search {
		  cursor: pointer;
		  padding-top: 10px;
		  &:hover {
			  color: var(--themeColor);
			  font-weight: 700;
		  }
	  }
  }
//   .list {
// 	  width: 350px;
// 	  height: 450px;
// 	  overflow-y: scroll;
// 	  h3 {
// 		  padding-left: 6px;
// 	  }
//   }

  .list {
	width: 350px;
	height: 450px;
	position: absolute; /* 绝对定位 */
	top: 70px; /* 放置在输入框下方 */
	left: 240px;
	overflow-y: scroll;
	h3 {
		padding-left: 6px;
	}
}
  .history {
	  padding-top: 5px;
	  .hd {
		  display: flex;
		  align-items: center;
		  .icon-delete {
			  font-size: 13px;
			  padding-left: 10px;
			  &:hover {
				  color: var(--themeColor);
				  cursor: pointer;
			  }
		  }
	  }
	  .bd {
		  .historylist {
			  display: flex;
			  flex-wrap: wrap;
			  padding: 10px 5px;
			 
			  .historylistitem {
				  margin-left: 5px;
				  margin-bottom: 5px;
				  padding: 3px 0;
				  font-size: 13px;
				  border-radius: 15px;
				  border: 1px solid #d3d3d3;
				  cursor: pointer;
				  .icon {
					  display: inline-block;
					  width: 12px;
					  height: 12px;
					  margin-right: 3px;
				  }
				  .icon-guanbi {
					  font-size: 12px;
					  &:hover {
						  color: var(--themeColor);
					  }
				  }
			  }
		  }
	  }
  }
  .hot-search-rank {
	//   width: 350px;
	//   height: 450px;
	//   overflow-y: scroll;
	  cursor: pointer;
	  background: #fff;
	  li {
		  display: flex;
		  align-items: center;
		  padding: 10px 5px;
		  .num {
			  width: 30px;
			  padding-left: 5px;
		  }
		  .hotword-num {
			  color: red;
			  font-weight: 700;
		  }
		  .main-content {
			  .word {
				  span {
					  padding-right: 10px;
				  }
				  .icon {
					  display: inline-block;
					  width: 30px;
					  height: 20px;
					  img {
						  width: 100%;
					  }
				  }
			  }
			  p {
				  padding-top: 5px;
			  }
			  .hotword {
				  color: black;
				  font-weight: 700;
			  }
		  }
	  }
	  li:hover {
		  background: rgba(220, 220, 220, 0.4);
	  }
  }
  </style>
  



